<template>
	<view class="content">
		<view class="pay-amount">
			<span class="pay-icon">￥</span>88.80
		</view>
		<view class="pay-detail">
			<view class="pay-row flex">
				<view class="pay-title">订单编号：</view>
				<view class="pay-number">537284785782637248</view>
			</view>
			<view class="pay-row flex">
				<view class="pay-title">下单时间:</view>
				<view class="pay-number">2020-08-08 12:30:56</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#f0f0f0"></u-gap>
		<view class="flex pay-mode">
			<view class="mode-icon">
				<image src="../../static/weixin.png" mode="aspectFill" style="width: 56rpx;height: 56rpx;"></image>
			</view>
			<view class="mode-info">
				<view class="mode-tit">微信支付</view>
				<view class="mode-deta">微信安全支付</view>
			</view>
			<view>
				<u-checkbox v-model="check" shape="circle" icon-size="36" active-color="#FC4658"></u-checkbox>
			</view>
		</view>
		<view class="bot-btn">
			<u-button :custom-style="btnPlus" hair-line="false" shape="circle">立即支付</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				check: true,
				btnPlus: {
					width: "690rpx",
					height: "80rpx",
					bordeRadius: "40rpx",
					background: " #F74F6B",
					fontSize: "30rpx",
					color: "#FFFFFF"
				}
			}
		}
	}
</script>

<style scoped>
	.content {
		height: 100vh;
		background: #FFFFFF;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pay-amount {
		text-align: center;
		color: #F4273B;
		font-size: 48rpx;
		line-height: 48rpx;
		padding: 40rpx 0;
		background: #FFFFFF;
	}

	.pay-icon {
		color: #F4273B;
		font-size: 26rpx;
	}

	.pay-detail {
		padding: 0 30rpx;
		background: #FFFFFF;
	}

	.pay-row {
		padding: 30rpx 0;
	}

	.pay-title {
		color: #333333;
		font-size: 28rpx;
		line-height: 28rpx;
	}

	.pay-number {
		color: #7F7F7F;
		font-size: 26rpx;
		font-size: 26rpx;
	}

	.pay-mode {
		padding: 50rpx 30rpx;
		background: #FFFFFF;
	}

	.mode-icon {
		width: 56rpx;
		height: 56rpx;
		margin-right: 20rpx;
	}

	.mode-info {
		width: 530rpx;
	}

	.mode-tit {
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}

	.mode-deta {
		color: #999999;
		font-size: 24rpx;
	}

	.bot-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 24rpx 30rpx;
	}
</style>
